<template>
    <div :style="carStyle">
        <div v-if="!obj.url" class="defaultText">请在右侧配置数据</div>
        <video ref="videoElement" class="videplay" :src="videoUrl" id="videoElement" autoplay muted playsinline width="100%"
            height="100%"></video>
        <div class="gotoViewBtn" v-if="isGotoView" @click="gotoUrl(obj)"></div>
    </div>
</template>

<script>
import hlsjs from 'hls.js'
import flvjs from 'flv.js'

export default {
    Name: "Camera",
    props: {
        obj: Object,
        isEdit: {
            type: Boolean,
            default: false,
        },
        gotoUrl: Function,
    },
    data() {
        return {
            carStyle: {},
            // videoUrl: 'http://rtmp.horaintel.com/hora/electric2.m3u8?auth_key=540000000001655100000-0-0-becc2cdcfc9f5682ed673273b9ae0150',
            // videoUrl: 'https://news.cgtn.com/resource/live/english/cgtn-news.m3u8',
            videoUrl: '',
            video: null,
            hlsjs: null,
            flvPlayer: null,
        }
    },
    mounted() {
        var self = this;
        document.addEventListener('visibilitychange', function () {
            if (document.visibilityState === 'hidden') {
                console.log('隐藏');
                self.celarPlayer();
            }
            if (document.visibilityState === 'visible') {
                self.goPlayer();
                console.log('显示')
            }
        })

        this.setStyle();

        this.video = this.$refs.videoElement;
        if (hlsjs.isSupported()) {
            this.hlsjs = new hlsjs();
        }
        this.goPlayer();
    },
    beforeDestroy() {
        // console.log("关闭看板了");
        this.celarPlayer();
    },
    computed: {
        isGotoView() {
            if (this.isEdit == false && this.obj.contactType > 0) {
                if (this.obj.contactType == 1 && this.obj.boardId) {
                    return true;
                }
                if (this.obj.contactType == 2 && this.obj.url) {
                    return true;
                }
            }
            return false;
        }
    },
    methods: {
        goPlayer() {
            var self = this;
            if (!this.obj.url) {
                return false;
            }

            if (this.obj.videoType == 0) {
                if (hlsjs.isSupported()) {
                    this.hlsjs.loadSource(this.obj.url);//设置播放路径
                    this.hlsjs.attachMedia(this.video);//解析到video标签上
                    this.hlsjs.on(hlsjs.Events.MANIFEST_PARSED, () => {
                        this.video.play();
                    });
                    this.hlsjs.on(hlsjs.Events.ERROR, (event, data) => {
                        // console.log("加载失败");
                    });
                } else if (this.video.canPlayType('application/vnd.apple.mpegurl')) {
                    this.video.src = this.obj.url;
                    this.video.addEventListener('loadedmetadata', function () {
                        self.video.play();
                    });
                }
            } else {
                if (flvjs.isSupported()) {
                    this.flvPlayer = flvjs.createPlayer({
                        type: 'flv',
                        url: this.obj.url,
                        hasAudio: false,
                    }, {
                        autoCleanupMinBackwardDuration: true, // 清除缓存 对 SourceBuffer 进行自动清理
                    });
                    this.flvPlayer.attachMediaElement(this.video);
                    this.flvPlayer.load();
                    this.flvPlayer.play();
                }
            }
        },
        celarPlayer() {
            if (this.flvPlayer) {
                this.flvPlayer.destroy();
            }
            if (this.hlsjs) {
                this.hlsjs.destroy();
            }
        },
        setStyle() {
            var style = this.obj.style;

            var backgroundColor = "";
            var backgroundImage = "";
            // 背景颜色
            if (style.backgroundImage.length) {
                backgroundImage = `url(${style.backgroundImage}`;
            } else if (style.backgroundColor.length > 0) {
                backgroundColor = style.backgroundColor;
            } else {
                backgroundColor = "";
            }

            var boxShadow = "";
            if (style.boxShadow) {
                boxShadow = `${style.boxShadow.h}px ${style.boxShadow.v}px ${style.boxShadow.blur}px ${style.boxShadow.spreed}px ${style.boxShadow.color}`
            }

            this.carStyle = {
                boxShadow,
                width: "100%",
                height: "100%",
                display: "flex",
                backgroundSize: "100% 100%",
                borderStyle: "solid",
                backgroundImage,
                backgroundColor,
                color: style.color,
                fontSize: style.fontSize + "px",
                justifyContent: style.justifyContent,
                alignItems: style.alignItems,
                borderColor: style.borderColor,
                borderWidth: style.borderWidth + "px",
                borderRadius: style.borderRadius + "px",
                fontWeight: style.fontWeight,
                fontStyle: style.fontStyle,
            }

            if (this.isEdit == false && this.obj.contactType > 0) {
                this.carStyle.cursor = "pointer";
            }
        }
    },
    watch: {
        obj: {
            deep: true,  // 深度监听
            handler(newVal, oldVal) {
                this.setStyle();
                if (oldVal.url != newVal.url || oldVal.videoType != newVal.videoType) {
                    this.goPlayer();
                }
            }
        }
    },
}
</script>

<style>
.videplay {
    /* object-fit: cover; */
}
</style>